﻿@using XRepair.Models
@using xCache = MvcXRepairAdmin.CacheData

@model List<Symptom>

@{
    ViewBag.Title = "Index";
    List<Model> activeModels = xCache.Cache.GetAllActiveModels();

    List<Brand> activeBrands = MvcXRepairAdmin.CacheData.Cache.GetAllActiveBrands();
    Dictionary<int, string> brandDict = activeBrands.ToDictionary(x => x.ID.Value, x => x.BrandName);
    Dictionary<int, string> modelDict = activeModels.ToDictionary(x => x.ID.Value, x => x.ModelName);
}

@section head
{
    <link type="text/css" href="@Url.Content(@"~\Content\themes\base\jquery-ui.css")" rel="stylesheet" />

    <style type="text/css">
        #symptomList
        {
            border-collapse: collapse;
        }

            #symptomList td
            {
                border: 1px solid #999;
                vertical-align: top;
            }

        #dlgAddNewSymptom td, #dlgEditSymptom td
        {
            vertical-align: top;
        }

        .lnkEditSymptom
        {
            cursor: pointer;
        }

        #symptomList thead tr
        {
            font-weight: bold;
            background: #999;
        }
    </style>
}

<h2>List of symptoms</h2>

<table id="symptomList">
    <thead>
        <tr>
            <td class="hide">[ID]</td>
            <td>[Name]</td>
            <td>[Brand]</td>
            <td>[Model]</td>
            <td>[Description]</td>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td class="hide">@item.ID</td>
                <td>@item.Name</td>
                <td class="hide">@item.BrandID</td>
                <td>@brandDict[item.BrandID.Value]</td>
                <td class="hide">@item.ModelID</td>
                <td>@modelDict[item.ModelID.Value]</td>
                <td>@item.Description</td>
                <td><a class="lnkEditSymptom">Edit</a>
                    <br />@Html.ActionLink("Delete", "Delete", new { id = @item.ID })</td>
            </tr>
        }
    </tbody>
</table>

<input type="button" value="Add new" id="btnAddNewSymptom" />

<div id="dlgAddNewSymptom" class="hide" title="Add new symptom">
    @Html.Partial("AddNewPartial", new Symptom())
</div>

<div id="dlgEditSymptom" class="hide" title="Edit symptom">
    @Html.Partial("EditPartial", new Symptom())
</div>

@section lazy
{
    <script type="text/javascript" src="@Url.Content(@"~\Scripts\jquery-ui-1.8.20.min.js")"></script>
    <script type="text/javascript" src="@Url.Content(@"~\Scripts\mvcxrepairadmin.js")"></script>

    <script type="text/javascript">        
        $(function () {
            $("#dlgAddNewSymptom, #dlgEditSymptom").dialog({
                autoOpen: false,
                height: 330,
                width: 710,
                modal: false,
                resizable: false
            });

            $("#btnAddNewSymptom").click(function () {
                $("#dlgAddNewSymptom").dialog("open");
            });

            $("#btnCancelAdd").click(function () {
                $("#dlgAddNewSymptom").dialog("close");
            });

            $("#btnCancelEdit").click(function () {
                $("#dlgEditSymptom").dialog("close");
            });

            $(".lnkEditSymptom").click(function () {
                var contextObj = $(this);
                BindCurrentRowToModel(contextObj);
                $("#dlgEditSymptom").dialog("open");
            });

            $("#dlgEditSymptom #BrandID, #dlgAddNewSymptom #BrandID").change(function(){
                UpdateModelOptions($(this));
            });

        });

        function UpdateModelOptions(contextObj)
        {
            var newVal = $(contextObj).val();
            var html = "";

            if(!newVal == false)
            {
                html = '<option value="" selected="selected">Select model</option>';

                for(var i = 0; i < modelJson.length; i++)
                {
                    var modelItem = modelJson[i];

                    if(modelItem.BrandID == newVal)
                    {
                        html += '<option value="' + modelItem.ID + '">' + modelItem.ModelName + '</option>';
                    }
                }
            }
            else
            {
                html = '<option value="" selected="selected">Wait for selected brand</option>';
            }

            $(contextObj).closest("table").find("#ModelID option").remove();            
            $(contextObj).closest("table").find("#ModelID").append(html);
        }

        function BindCurrentRowToModel(contextObj) {

            var currentRowDataArr = [];
            var currentRow = $(contextObj).closest("tr");

            $('td', currentRow).each(function (i, td) {
                currentRowDataArr.push($(td).html());
            });

            $("#dlgEditSymptom #ID").val(currentRowDataArr[0]);
            $("#dlgEditSymptom #Name").val(currentRowDataArr[1]);
            $("#dlgEditSymptom #BrandID option[value='" + currentRowDataArr[2] + "']").attr("selected", "selected");

            var brandVal = currentRowDataArr[2];            
            var html = "";

            if(!brandVal == false)
            {
                for(var i = 0; i < modelJson.length; i++)
                {
                    var modelItem = modelJson[i];

                    if(modelItem.BrandID == brandVal)
                    {
                        html += '<option value="' + modelItem.ID + '">' + modelItem.ModelName + '</option>';
                    }
                }

                if(!html == true)
                {
                    html = '<option value="" selected="selected">Select model</option>';
                }
            }
            else
            {
                html = '<option value="" selected="selected">Wait for selected brand</option>';
            }

            $("#dlgEditSymptom #ModelID option").remove();            
            $("#dlgEditSymptom #ModelID").append(html);

            $("#dlgEditSymptom #ModelID option[value='" + currentRowDataArr[4] + "']").attr("selected", "selected");
            $("#dlgEditSymptom #Description").val(currentRowDataArr[6]);
        }

        var modelJson = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(activeModels))
    </script>
}